<template>
	<view class="bill-container">
		<topBar :back="true">
			<template #center style="width: 100%;">
				<!-- 导航栏 -->
				<view class="nav-bar flex ai-c jc-c">
					<view class="nav-tabs">
						<view class="tab-item" :class="{ active: activeTab === 'quiz' }"
							@click="switchTab('quiz')">
							<text>答题记录</text>
						</view>
					</view>
				</view>
			</template>
		</topBar>

		<!-- 列表头部 -->
		<view class="list-header">
			<text class="header-item">答题等级</text>
			<text class="header-item">时间</text>
			<text class="header-item" style="text-align: right;">结果</text>
			<text class="header-item" style="text-align: right;">积分</text>
		</view>

		<!-- 答题记录列表 -->
		<view class="transaction-list">
			<view class="transaction-item" v-for="(item, index) in quizRecords" :key="index">
				<text class="quiz-level">{{ item.quename }}</text>
				<text class="quiz-date">{{ item.createtime }}</text>
				<text class="quiz-result" style="text-align: right;">{{ item.is_win == '0' ? '失败':'获胜'}}</text>
				<text class="quiz-score" style="font-weight: 700;text-align: right;">{{ item.point }}</text>
			</view>
		</view>

		<!-- 底部线条 -->
		<view class="bottom-line"></view>
	</view>
</template>

<script setup>
import topBar from '@/components/topBar.vue'
import { ref } from 'vue'
import api from '@/api'
import { useUserStore } from '@/store/index.js'
import { onLoad } from '@dcloudio/uni-app'

const activeTab = ref('quiz')
const userStore = useUserStore()
const emit = defineEmits(['review', 'home', 'result','quizRecords'])

const quizRecords = ref([
	{ level: '初级', date: '2025.01.26', result: '失败', score: '0' },
	{ level: '初级', date: '2025.01.26', result: '失败', score: '0' },
	{ level: '初级', date: '2025.01.26', result: '失败', score: '0' },
	{ level: '初级', date: '2025.01.26', result: '获胜', score: '+80' },
	{ level: '初级', date: '2025.01.26', result: '获胜', score: '+80' },
	{ level: '初级', date: '2025.01.26', result: '放弃', score: '0' }
])

const switchTab = (tab) => {
	activeTab.value = tab
}

const getResultClass = (result) => {
	switch (result) {
		case '获胜':
			return 'result-success'
		case '失败':
			return 'result-fail'
		case '放弃':
			return 'result-abandon'
		default:
			return ''
	}
}

onLoad(() => {
    // 如果用户已登录，获取最新用户信息
    if (userStore.hasLogin) {
        api.getUserInfo({
            user_id: userStore.userInfo?.id
        }).then(res => {
            userStore.setUserInfo(res.data)
        })
		handleViewAnswers();
    }
})


const handleViewAnswers = () => {
    api.getQuestionlog({
        user_id: userStore.userInfo?.id
    }).then(res => {
        console.log('查看结果:', res)
        quizRecords.value = res.data
    })
}

const getScoreClass = (score) => {
	if (score.startsWith('+')) {
		return 'score-positive'
	}
	return 'score-zero'
}

const handleBack = () => {
	uni.navigateBack()
}
</script>

<style scoped>
.bill-container {
	min-height: 100vh;
		background-color: #f0f0f0;
	position: relative;
}

/* 导航栏 */
.nav-bar {
	width: 100%;
	display: flex;
	margin: 0 auto;
}

.back-btn {
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-tabs {
	display: flex;
	gap: 64rpx;
}

.tab-item {
	font-size: 36rpx;
	position: relative;
	padding: 16rpx 0;
	cursor: pointer;
}

.tab-item text {
	font-size: 32rpx;
	color: #666666;
	font-weight: 400;
}

.tab-item.active text {
	color: #000000;
	font-weight: 600;
}

.tab-line {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 38rpx;
	height: 6rpx;
	background: #0F50DC;
	border-radius: 2rpx;
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.action-icon {
	font-size: 32rpx;
	color: #000000;
	font-weight: 400;
}

.separator {
	width: 1rpx;
	height: 32rpx;
	background: #e0e0e0;
}

.filter-icon {
	width: 32rpx;
	height: 32rpx;
	border: 2rpx solid #000000;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.filter-dot {
	width: 6rpx;
	height: 6rpx;
	background: #000000;
	border-radius: 50%;
}

/* 列表头部 */
.list-header {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr;
	align-items: center;
	padding: 40rpx 32rpx 32rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.header-item {
	font-size: 26rpx;
	font-weight: 700;
	color: #000;
}

/* 答题记录列表 */
.transaction-list {
	padding: 0 32rpx;
}

.transaction-item {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr;
	align-items: center;
	padding: 32rpx 0;
	border-bottom: 1rpx solid #f8f8f8;
}

.quiz-level,
.quiz-date,
.quiz-result,
.quiz-score {
	font-size: 28rpx;
	color: #000000;
	font-weight: 400;
}

.score-positive {
	color: #000;
	font-weight: 600;
}

.score-zero {
	color: #000000;
}

/* 底部线条 */
.bottom-line {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2rpx;
	background: #f0f0f0;
}
</style>
